<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="500px"
    >
      <el-form
        :model="classForm"
        :rules="classFormRules"
        ref="classForm"
        label-width="100px"
      >
        <el-form-item
          label="期次："
          prop="period"
          v-if="mode === 'period' || mode === 'batchPeriod'"
        >
          <nice-select
            v-model="classForm.period"
            placeholder="请选择期次"
            clearable
            :options="periodList"
            @change="changePeriod"
          ></nice-select>
        </el-form-item>
        <p
          v-if="mode === 'class' || mode === 'batchClass'"
          class="margin-left15"
        >
          当前班级：{{ className }}
        </p>
        <el-form-item
          label="选择班级："
          prop="class"
          :rules="
            mode === 'period' || mode === 'batchPeriod'
              ? []
              : [{ required: true, message: '请选择班级', trigger: 'change' }]
          "
        >
          <nice-select
            v-model="classForm.class"
            placeholder="请选择班级"
            clearable
            :options="classList"
          ></nice-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取消</el-button>
        <el-button type="primary" @click="save" size="small" v-preventReClick
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllClassByPeriodId,
  adjustPeriod,
  adjustClass
} from "@/api/user.js";
export default {
  data() {
    return {
      classForm: {
        period: "",
        class: ""
      },
      classFormRules: {
        period: [{ required: true, message: "请选择期次", trigger: "change" }]
      },
      visible: false,
      classList: [],
      studentId: "",
      oldClassId: ""
    };
  },
  props: {
    title: "",
    mode: "",
    periodId: "",
    courseId: "",
    classId: "",
    className: "",
    periodList: {
      type: Array,
      default: []
    },
    multipleSelection: {
      type: Array,
      default: []
    }
  },
  methods: {
    init(row) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.classForm.resetFields();
        if (row) {
          this.classForm.period = this.periodId;
          this.classForm.class = row.class_id;
          this.oldClassId = row.class_id;
          this.studentId = row.student_id;
        } else {
          this.oldClassId = this.classId;
        }
        this.getAllClassByPeriodId(this.periodId);
      });
    },
    changePeriod(val) {
      this.classForm.class = "";
      this.getAllClassByPeriodId(val);
    },
    async getAllClassByPeriodId(id) {
      let res = await getAllClassByPeriodId({
        "nice_classes.period": id
      });
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        if (data.data.list && data.data.list.length) {
          this.classList = data.data.list.map(ele => {
            return {
              label:
                ele.classes_name +
                " " +
                "辅导老师：" +
                ele.tutor_name +
                " " +
                ele.num +
                "学生",
              value: ele.id
            };
          });
        } else {
          this.classList = [];
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    save() {
      this.$refs["classForm"].validate(valid => {
        if (valid) {
          this.submit();
        }
      });
    },
    async submit(e) {
      let res =
        this.mode === "period"
          ? await adjustPeriod([
              {
                oldPeriodId: this.periodId,
                newPeriodId: this.classForm.period,
                classId: this.classForm.class,
                studentId: this.studentId
              }
            ])
          : this.mode === "batchPeriod"
          ? await adjustPeriod(
              this.multipleSelection.map(ele => {
                return {
                  oldPeriodId: this.periodId,
                  newPeriodId: this.classForm.period,
                  classId: this.classForm.class,
                  studentId: ele.student_id
                };
              })
            )
          : this.mode === "class"
          ? await adjustClass([
              {
                class_id: this.classForm.class,
                student_id: this.studentId
              }
            ])
          : await adjustClass(
              this.multipleSelection.map(ele => {
                return {
                  class_id: this.classForm.class,
                  student_id: ele.student_id
                };
              })
            );
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.$message({
          message: `${this.mode === "period" || this.mode === "batchPeriod"}`
            ? "调期成功！"
            : "调班成功！",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.visible = false;
            this.$emit("refreshDataList");
          }
        });
      } else {
        this.$message.error(data.msg);
      }
    }
  }
};
</script>
